<template>
  <div>
    <TypeNav></TypeNav>
    <div class="container">
      <!-- 测试按钮 -->
      <!-- <input type="text" v-model="reqParams.keyword" />
    <button @click="searchHandel">搜索</button> -->
      <!-- 属性列表 -->
      <div class="filter">
        <!--面包屑导航-->
        <div class="filterCategory" v-if="isShowBresd">
          <h4>已选</h4>
          <ul>
            <li
              class="bread"
              v-for="(item, index) in reqParams.props"
              :key="index"
            >
              <div>
                {{ item.split(":")[2] }}：<span>{{ item.split(":")[1] }}</span>
              </div>
              <div>
                <i class="iconfont icon-delete" @click="removeAttr(index)"></i>
              </div>
            </li>
          </ul>
          <button class="clear-btn">清空已选条件</button>
        </div>
        <!-- 属性列表 -->
        <div
          class="filterCategory"
          v-for="attr in goodsData.attrsList"
          :key="attr.attrId"
        >
          <h4>{{ attr.attrName }}</h4>
          <ul>
            <li
              class="attrValue"
              v-for="(attrValue, index) in attr.attrValueList"
              :key="index"
              @click="searchFoProps(attr, attrValue)"
            >
              {{ attrValue }}
            </li>
          </ul>
          <button class="most-btn">+ 多选</button>
        </div>
      </div>
      <button class="showMoreButton">更多选项&nbsp;∨</button>
      <!-- 导航 -->
      <div class="sortBar">
        <div class="opGeneral">
          <span>综合</span>
        </div>
        <div class="opPrice">
          <span>价格</span>
        </div>

        <div class="opSale"><span>销量</span></div>
        <div class="opSelectPrice">
          <span>
            <input type="text" placeholder=" ￥" value="￥" />
          </span>
          <i>-</i>
          <span>
            <input type="text" placeholder=" ￥" value="￥" />
          </span>
        </div>
        <div class="opPagination">
          <span class="totalNumber">{{ goodsData.total }} 件商品</span>
          <span>{{ reqParams.pageNo }} / {{ totalPage }}</span>
          <button class="button-back" @click="nextPage">
            下一页<i class="el-icon-arrow-right"></i>
          </button>
          <button class="button-next" @click="backPage">
            <i class="el-icon-arrow-left"></i>
          </button>
        </div>
      </div>
      <!-- 商品展示 -->
      <div class="goodsContainer">
        <div class="goodsItem-wiper">
          <router-link
            :to="`/detail/${goods.id}`"
            class="goodsItem"
            v-for="goods in goodsData.goodsList"
            :key="goods.id"
          >
            <div class="goodsItemBorder">
              <img :src="goods.defaultImg" />
              <div class="multiColor"></div>
              <div class="goodsPrice">
                <span class="goodsPriceLogo">特卖价</span>
                <span class="goodsRealPrice">￥{{ goods.price }}</span>
                <span>
                  <del>￥{{ goods.price }}</del>
                </span>
                <span>8.7折</span>
              </div>
              <p>{{ goods.title }}</p>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoodsList } from "@/api/search";

export default {
  name: "Search",
  data() {
    return {
      reqParams: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
        keyword: "",
        props: [],
        trademark: "",
        order: "1:desc",
        pageNo: 1,
        pageSize: 8,
      },
      goodsData: {},
    };
  },
  mounted() {
    this.getGoodsData();
  },
  methods: {
    // 发送请求获取搜索结果
    async getGoodsData() {
      const newReqParams = this.updataReqParams();
      const res = await getGoodsList(newReqParams);
      this.goodsData = res.data;
    },
    // 更新请求参数
    updataReqParams() {
      const { category1Id, category2Id, category3Id, keyword } =
        this.$route.query;
      const newReqParams = {
        ...this.reqParams,
        category1Id,
        category2Id,
        category3Id,
        keyword,
      };
      return newReqParams;
    },
    // 搜索按钮
    searchHandel() {
      this.getGoodsData();
    },
    // 通过属性搜索商品
    searchFoProps(attr, attrValue) {
      const str = `${attr.attrId}:${attrValue}:${attr.attrName}`;
      const flag = this.reqParams.props.some((item) => item === str);
      if (!flag) {
        this.reqParams.props.push(str);
        this.getGoodsData();
      } else {
        alert("搜索条件重复，请您重新选择");
      }
    },
    // 移除属性 重新获取搜索结果
    removeAttr(index) {
      this.reqParams.props.splice(index, 1);
      this.getGoodsData();
    },
    // 点击下一页
    nextPage() {
      if (this.reqParams.pageNo < this.totalPage) {
        this.reqParams.pageNo++;
        this.getGoodsData();
      } else {
        this.$message.success("已经是最后一页了");
      }
    },
    // 点击上一页
    backPage() {
      if (this.reqParams.pageNo !== 1) {
        this.reqParams.pageNo--;
        this.getGoodsData();
      }
    },
  },
  computed: {
    // 显示和隐藏面包屑
    isShowBresd() {
      return this.reqParams.props.length;
    },
    // 总页数
    totalPage() {
      return Math.floor(this.goodsData.total / this.reqParams.pageSize);
    },
  },
  watch: {
    $route() {
      this.getGoodsData();
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  ul {
    list-style-type: none;
  }
}
.clear-btn {
  position: absolute;
  right: 10px;
  top: 13px !important;
  border: 1px solid #d1d1d1;
  background-color: #fff;
  width: 98px !important;
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  border-radius: 3px;
  color: #666;
}
.most-btn {
  position: absolute;
  right: 10px;
  top: 13px !important;
  border: 1px solid #d1d1d1;
  background-color: #fff;
  width: 48px !important;
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  border-radius: 3px;
  color: #666;
}

.container {
  overflow: hidden;
  width: 1200px;
  // display: table;
  // height: 900px;
  box-sizing: border-box;
  margin: 20px auto;
  background-color: rgba(255, 255, 255, 0);
  .bread {
    border: 1px solid #dfdfdf;
  }
  .showMoreButton {
    cursor: pointer;
    margin: -1px;
    border: 1px solid #dfdfdf;
    border-top-color: #fff;
    background-color: white;
    position: relative;
    left: 40%;
    top: 0;
    width: 120px;
    height: 30px;
    color: #666;
  }
  .filter {
    border: 1px solid #dfdfdf;
    position: relative;
    width: 1198px;
    .filterCategory {
      &:last-child {
        border-bottom: none;
      }
      color: #333;
      border-bottom: 1px dotted #dfdfdf;
      display: flex;
      position: relative;
      button {
        // position: absolute;
        // right: 10px;
        // margin-top: 12px;
        border: 1px solid #d1d1d1;
        background-color: #fff;
        width: 48px;
        font-size: 12px;
        height: 24px;
        line-height: 24px;
        border-radius: 3px;
        color: #666;
      }
      h4 {
        color: #666;
        box-sizing: border-box;
        width: 98px;
        height: 50px;
        float: left;
        text-align: center;
        line-height: 50px;
      }
      ul {
        padding: 16px 20px;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: -10px;
        li {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 2px 0;
          margin-bottom: 10px;
          margin-right: 50px;
          span {
            color: #f10180;
            margin-right: 5px;
          }
          cursor: pointer;
          &:hover {
            color: #f10180;
          }
        }
      }
    }
  }
  .sortBar {
    border: 1px solid #dfdfdf;
    margin-top: 30px;
    width: 1198px;
    height: 48px;
    background-color: #f5f5f5;
    position: absolute;
    text-align: center;
    line-height: 48px;
    .active {
      background-color: white;
      color: #ff31a3 !important;
      border: 1px solid #ff31a3 !important;
    }

    .opGeneral {
      width: 60px;
      float: left;
      border-right: 1px solid #dfdfdf;
    }
    .opPrice {
      width: 67px;
      border-right: 1px solid #dfdfdf;

      float: left;
    }
    .opDiscount {
      width: 67px;
      border-right: 1px solid #dfdfdf;

      float: left;
    }
    .opSale {
      width: 67px;
      border-right: 1px solid #dfdfdf;

      float: left;
    }
    .opSelectPrice {
      width: 160px;
      float: left;
      padding: 0 0 0 20px;
      input {
        width: 48px;
        height: 10px;
        padding: 5px;
      }
      i {
        margin: 0 10px 0;
      }
    }
    .opPagination {
      width: 261px;
      float: right;
      padding: 0 10px 0 10px;
      .totalNumber {
        margin-right: 30px;
        font-size: 14px;
        color: #f10180;
      }
      span {
        display: inline-block;
      }
      .button-back {
        margin: 12px 0 10px 10px;
        cursor: pointer;
        float: right;
        border: 1px solid #d1d1d1;
        background-color: #fff;
        width: 71px;
        font-size: 12px;
        height: 24px;
        color: #848585;
        border-radius: 3px;
      }
      .button-next {
        margin: 12px 0 10px 10px;
        cursor: pointer;
        float: right;
        border: 1px solid #d1d1d1;
        background-color: #fff;
        width: 28px;
        font-size: 12px;
        height: 24px;
        color: #848585;
        border-radius: 3px;
      }
    }
  }
  .goodsContainer {
    margin-bottom: 100px;
    margin-top: 100px;

    .goodsItem-wiper {
      width: 1280px;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: left;
      display: flex;
    }
    .goodsItem {
      cursor: pointer;
      margin-bottom: 20px;
      margin-right: 83px;
      width: 235px;
      height: 357px;
      border: 1px solid rgb(206, 206, 206);
      position: relative;
      .multiColor {
        width: 15px;
        height: 33px;
        background-image: url(//ugc.vipstatic.com/img/plugins/goods/icon-multi-color.png);
        position: absolute;
        bottom: 130px;
        right: 8px;
      }
      .goodsPrice {
        height: 30px;
        padding: 12px;
        align-items: center;
        justify-content: space-between;
        display: flex;
        .goodsPriceLogo {
          // margin-left: 10px;
          width: 36px;
          height: 18px;
          display: inline-block;
          font-size: 12px;
          color: white;
          background-image: linear-gradient(270deg, #e456ff 0, #ff31a3 100%);
          border-radius: 10px;
        }
        .goodsRealPrice {
          font-size: 23px;
          color: #333;
        }
      }
      img {
        width: 233px;
        height: 235px;
      }
      span {
        // margin-left: 10px;
        color: #666;
      }
      del {
        color: #666;
      }
      p {
        padding: 0 12px 0 12px;
        color: #666;
        // margin-top: 20px;
      }
    }
  }
}
</style>
